<template>
  <el-row id="stlp">
    <el-form :inline="true" class="clearfix">
      <el-form-item>
        <!--<el-input v-model="meterAddrStr" size="small" placeholder="路灯编号" style="vertical-align: top"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-input v-model="streetLampTypeStr" size="small" placeholder="路灯类型" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="addressStr" size="small" placeholder="路灯具体地址" style="vertical-align: top"></el-input>
      </el-form-item>
      <!--<el-form-item>-->
      <!--<el-input v-model="powerUnitStr" size="small" placeholder="权属单位" style="vertical-align: top"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="search" size="small" style="line-height:14px;vertical-align: top;">查询</el-button>
        <el-button type="primary" @click="handleAdd" size="small" style="line-height:14px;vertical-align: top;">新增路灯</el-button>
        <el-button type="primary" @click="openQuick" size="small" style="line-height:14px;vertical-align: top;">快速新增路灯</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel" size="small" style="line-height:14px;vertical-align: top;">导出</el-button>
        <el-button type="primary" @click="uploadDialog = true" size="small" style="line-height:14px;vertical-align: top;">导入</el-button>
        <el-button type="danger" @click="batchDelete" style="line-height:14px;vertical-align: top;"
                   :disabled="this.sels.length===0" size="small">批量删除

        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="exceptionReportList" v-loading="listLoading" border style="width: 100%; font-size: 12px;"
              row-class-name="tabRow" tooltipEffect="light" @selection-change="selsChange" :height="650">
      <!--<el-table-column align="center" prop="meterAddr" label="路灯编号"></el-table-column>-->
      <el-table-column type="selection"></el-table-column>
      <el-table-column align="center" prop="address" label="路灯地址" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="streetLampType" label="路灯类型"></el-table-column>
      <el-table-column align="center" prop="lngLat" label="经纬度" show-overflow-tooltip>
        <template scope="scope">
          <div class="t_blue" @click="goMap(scope.row.lngLat,scope.row.address)">查看地图</div>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" prop="powerUnit" label="权属单位" show-overflow-tooltip></el-table-column>-->
      <el-table-column align="center" prop="deptName" label="部门" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" width="150" :formatter="createTimeStr" label="创建时间"></el-table-column>
      <el-table-column align="center" label="操作">
        <template scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="primary" v-if="canCode" @click="doSave(scope.$index, scope.row)">生成二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100, 200, 300, 400]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
    <el-dialog v-if="showAdd" :title="dialogTitle" :visible.sync="showAdd" :close-on-click-modal="false" @close="resetStreetLamp" custom-class="el-dialog--small">
      <el-form :model="streetLamp" label-width="140px" :rules="streetLampFormRules" ref="streetLamp"
               style="margin-top: -15px;">
        <!--<el-form-item label="路灯编号" prop="meterAddr">-->
        <!--<el-input v-model="streetLamp.meterAddr" :maxlength="50"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="路灯地址" prop="address">
          <el-input v-model="streetLamp.address" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="安装类型" prop="streetLampType">
          <el-select v-model="streetLamp.streetLampType" style="width: 100%" placeholder="安装类型"
                     :disabled="isDetail && opType === 'detail'">
            <el-option v-for="(item, index) in streetLampTypeList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门选择" prop="deptid">
          <el-select v-model="streetLamp.deptid" style="width: 100%" placeholder="部门"
                     :disabled="isDetail && opType === 'detail'" @change="getTeamList(true)">
            <el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属班组" prop="treamId">
          <el-select v-model="streetLamp.treamId" style="width: 100%" placeholder="团队" @visible-change="$forceUpdate()"
                     :disabled="isDetail && opType === 'detail'" @change="getPdList(true)">
            <el-option v-for="(item, index) in teamList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属控制箱" prop="distributionBoxid">
          <el-select v-model="streetLamp.distributionBoxid" style="width: 100%" placeholder="配电箱" @visible-change="$forceUpdate()" filterable
                     :disabled="isDetail && opType === 'detail'" @change="getRoadList(true);">
            <el-option v-for="(item, index) in pdList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="坐标" prop="lngLat">
          <el-input v-model="streetLamp.lngLat" :maxlength="50" @change="getAdress"
                    style="width: calc(100% - 90px)"></el-input>
          <el-button size="small" type="primary" @click="showMap()" style="margin-left: 5px;">选择位置</el-button>
        </el-form-item>
        <el-form-item label="现场位置" prop="liveArea">
          <el-input v-model="streetLamp.liveArea" :maxlength="255" type="textarea"></el-input>
        </el-form-item>
        <!--<el-form-item label="权属单位" prop="powerUnit">-->
        <!--<el-input v-model="streetLamp.powerUnit" :maxlength="100"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="支路选择" prop="roadId">
          <el-select v-model="streetLamp.roadId" style="width: 100%" placeholder="支路"
                     :disabled="isDetail && opType === 'detail'">
            <el-option v-for="(item, index) in roadList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="streetLamp.remark" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="所属行政区域" prop="area">
          <el-select v-model="streetLamp.area" style="width: 100%" placeholder="行政区域"
                     :disabled="isDetail && opType === 'detail'">
            <el-option v-for="(item, index) in areaList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="道路等级" prop="level">
          <el-select v-model="streetLamp.level" style="width: 100%" placeholder="道路等级"
                     :disabled="isDetail && opType === 'detail'">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="灯杆编号" prop="number">
          <el-input v-model="streetLamp.number" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯杆数量" prop="num">
          <el-input v-model="streetLamp.num" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="投运时间(灯杆数量)" prop="puttime">
          <el-input v-model="streetLamp.puttime" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="资产原值(灯杆数量)" prop="propertynum">
          <el-input v-model="streetLamp.propertynum" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯杆高度" prop="height">
          <el-input v-model="streetLamp.height" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯杆基础尺寸" prop="baticsize">
          <el-input v-model="streetLamp.baticsize" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯具功率" prop="power">
          <el-input v-model="streetLamp.power" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="投运时间(灯具功率)" prop="powertime">
          <el-input v-model="streetLamp.powertime" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="资产原值(灯具功率)" prop="propertypower">
          <el-input v-model="streetLamp.propertypower" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯具数量" prop="lanternsnum">
          <el-input v-model="streetLamp.lanternsnum" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="灯具生产厂家" prop="company">
          <el-input v-model="streetLamp.company" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="图片" style="width: 100%">
          <el-upload
            action="/smartLight/api/account/wxupload.htm" :limit="10"
            accept=".jpg,.png" :on-success="configPicSuccess" :on-remove="configPicRemove" :file-list="configPicList"
            list-type="picture-card" multiple
            :auto-upload="true">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!--<el-form-item label="部门id" prop="deptid">-->
        <!--<el-input v-model="streetLamp.deptid" :maxlength="100"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <div scope="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="resetStreetLamp">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="saveAccountLoading">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showWeiXin" @close="resetWeiXin">
      <img :src="qrcodeUrl" style="width:320px;display: block;margin:0 auto">
    </el-dialog>
    <el-dialog :visible.sync="mapShow" @close="" customClass="map-dialog" title="选择地址">
      <div class="mapSpan">
        <span>经度：{{mapInfo.lng}}</span>
        <span>纬度：{{mapInfo.lat}}</span>
        <span :title="mapInfo.liveArea">现场地址：{{mapInfo.liveArea}}</span>
      </div>
      <div id="addr"></div>
      <div scope="footer" class="dialog-footer" style="text-align: right;margin-top: 10px;">
        <el-button @click="mapShow = false">关 闭</el-button>
        <el-button type="primary" @click="sureMap" :loading="saveAccountLoading">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="uploadDialog" title="导入路灯" @close="importList = []">
      <el-upload
        style="width: 280px;" ref="upload"
        class="upload-demo retailShopUpload" :auto-upload="true"
        action="/smartLight/web/streetLamp/upload.htm"
        accept=".xlsx,.xls"  :on-success="configFileSuccess" :on-change="configFileChange">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div class="importTable" v-if="importList.length > 0">
        <div class="importTitle">导入失败数据：</div>
        <div v-for="item in importList" class="tr">
          <span>{{item.name}}:</span><span>({{item.reason}})</span>
        </div>
      </div>
      <div scope="footer" class="dialog-footer" style="text-align: right;margin-top: 10px;">
        <el-button @click="uploadDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
    <div id="map2"></div>
    <div class="quick_add" v-if="quickDialog">
      <el-col :span="16">
        <div id="addr" class="map3"></div>
      </el-col>
      <el-col :span="8">
        <div style="height : calc(100vh - 215px) !important;overflow-y: auto">
          <el-form :model="streetLamp" label-width="140px" :rules="streetLampFormRules" ref="streetLamp">
            <!--<el-form-item label="路灯编号" prop="meterAddr">-->
            <!--<el-input v-model="streetLamp.meterAddr" :maxlength="50"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="路灯地址" prop="address">
              <el-input v-model="streetLamp.address" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="安装类型" prop="streetLampType">
              <el-select v-model="streetLamp.streetLampType" style="width: 100%" placeholder="安装类型"
                         :disabled="isDetail && opType === 'detail'">
                <el-option v-for="(item, index) in streetLampTypeList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门选择" prop="deptid">
              <el-select v-model="streetLamp.deptid" style="width: 100%" placeholder="部门"
                         :disabled="isDetail && opType === 'detail'" @change="getTeamList(true)">
                <el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属班组" prop="treamId">
              <el-select v-model="streetLamp.treamId" style="width: 100%" placeholder="团队"
                         :disabled="isDetail && opType === 'detail'" @change="getPdList(true)" @visible-change="$forceUpdate()">
                <el-option v-for="(item, index) in teamList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属控制箱" prop="distributionBoxid">
              <el-select v-model="streetLamp.distributionBoxid" style="width: 100%" placeholder="配电箱" @visible-change="$forceUpdate()" filterable
                         :disabled="isDetail && opType === 'detail'" @change="getRoadList(true);addLight(true)">
                <el-option v-for="(item, index) in pdList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐标" prop="lngLat">
              <el-input v-model="streetLamp.lngLat" :maxlength="50" @change="getAdress"></el-input>
            </el-form-item>
            <el-form-item label="现场位置" prop="liveArea">
              <el-input v-model="streetLamp.liveArea" :maxlength="255" type="textarea"></el-input>
            </el-form-item>
            <!--<el-form-item label="权属单位" prop="powerUnit">-->
            <!--<el-input v-model="streetLamp.powerUnit" :maxlength="100"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="支路选择" prop="roadId">
              <el-select v-model="streetLamp.roadId" style="width: 100%" placeholder="支路"
                         :disabled="isDetail && opType === 'detail'">
                <el-option v-for="(item, index) in roadList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="streetLamp.remark" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="所属行政区域" prop="area">
              <el-select v-model="streetLamp.area" style="width: 100%" placeholder="行政区域"
                         :disabled="isDetail && opType === 'detail'">
                <el-option v-for="(item, index) in areaList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="道路等级" prop="level">
              <el-select v-model="streetLamp.level" style="width: 100%" placeholder="道路等级"
                         :disabled="isDetail && opType === 'detail'">
                <el-option v-for="(item, index) in levelList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="灯杆编号" prop="number">
              <el-input v-model="streetLamp.number" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯杆数量" prop="num">
              <el-input v-model="streetLamp.num" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="投运时间(灯杆数量)" prop="puttime">
              <el-input v-model="streetLamp.puttime" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="资产原值(灯杆数量)" prop="propertynum">
              <el-input v-model="streetLamp.propertynum" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯杆高度" prop="height">
              <el-input v-model="streetLamp.height" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯杆基础尺寸" prop="baticsize">
              <el-input v-model="streetLamp.baticsize" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯具功率" prop="power">
              <el-input v-model="streetLamp.power" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="投运时间(灯具功率)" prop="powertime">
              <el-input v-model="streetLamp.powertime" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="资产原值(灯具功率)" prop="propertypower">
              <el-input v-model="streetLamp.propertypower" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯具数量" prop="lanternsnum">
              <el-input v-model="streetLamp.lanternsnum" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="灯具生产厂家" prop="company">
              <el-input v-model="streetLamp.company" :maxlength="255"></el-input>
            </el-form-item>
            <el-form-item label="图片" style="width: 100%">
              <el-upload
                action="/smartLight/api/account/wxupload.htm" :limit="10"
                accept=".jpg,.png" :on-success="configPicSuccess" :on-remove="configPicRemove" :file-list="configPicList"
                list-type="picture-card" multiple
                :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <!--<el-form-item label="部门id" prop="deptid">-->
            <!--<el-input v-model="streetLamp.deptid" :maxlength="100"></el-input>-->
            <!--</el-form-item>-->
          </el-form>
        </div>

        <div scope="footer" class="dialog-footer" style="margin-top :15px;text-align: center;padding-left: 110px;">
          <el-button  @click="closeQuick">关 闭</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="saveAccountLoading">保 存</el-button>
        </div>
      </el-col>
    </div>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  import $ from 'jquery'
  export default{
    data () {
      return {
        total: 2,
        page: 1,
        pageSize: 100,
        exceptionReportList: [],
        deptList: [],
        listLoading: false,
        loginType: '',
        meterAddrStr: '',
        streetLampTypeStr: '',
        addressStr: '',
        powerUnitStr: '',
        dialogTitle: '新增路灯',
        showAdd: false,
        showWeiXin: false,
        saveAccountLoading: false,
        isDetail: false,
        canCode:false,
        streetLampFormRules: {
//          meterAddr: [
//            {required: true, message: '请输入终端编号', trigger: 'blur'}
//          ],
          streetLampType: [
            {required: true, message: '请输入路灯类型', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入路灯具体地址', trigger: 'blur'}
          ],
          lngLat: [
            {required: true, message: '请输入经纬度', trigger: 'blur'}
          ],
//          powerUnit: [
//            {required: true, message: '请输入权属单位', trigger: 'blur'}
//          ]
        },
        streetLamp: {
          id: '',
          meterAddr: '',
          streetLampType: '',
          address: '',
          lngLat: '',
//          powerUnit: '',
          deptid: "",
          treamId: '',
          distributionBoxid: '',
          roadId: '',
          liveArea: '',
          pic:'',
        },
        qrcodeUrl: '',
        companytype: '',
        pdList: [],
        teamList: [],
        roadList: [],
        streetLampTypeList: [
          {name: "单臂铁杆路灯", id: "单臂铁杆路灯"},
          {name: "单臂水泥杆路灯", id: "单臂水泥杆路灯"},
          {name: "泛光灯", id: "泛光灯"},
          {name: "附墙壁灯", id: "附墙壁灯"},
          {name: "高杆灯", id: "高杆灯"},
          {name: "高低臂铁杆路灯", id: "高低臂铁杆路灯"},
          {name: "桥底吸顶灯", id: "桥底吸顶灯"},
          {name: "三臂铁杆路灯", id: "三臂铁杆路灯"},
          {name: "双臂水泥杆路灯", id: "双臂水泥杆路灯"},
          {name: "遂道灯", id: "遂道灯"},
          {name: "双臂铁杆路灯", id: "双臂铁杆路灯"},
          {name: "四头铁杆路灯", id: "四头铁杆路灯"},
          {name: "隧道壁灯", id: "隧道壁灯"},
          {name: "庭院灯", id: "庭院灯"},
          {name: "五头灯铁杆路灯", id: "五头灯铁杆路灯"},
          {name: "隧道荧光灯", id: "隧道荧光灯"},
        ],
        areaList:[
          {name: "新华街", id: "新华街"},
          {name: "花城街", id: "花城街"},
          {name: "新雅街", id: "新雅街"},
          {name: "秀全街", id: "秀全街"},
          {name: "炭步镇", id: "炭步镇"},
          {name: "赤坭镇", id: "赤坭镇"},
          {name: "花山镇", id: "花山镇"},
          {name: "花东镇", id: "花东镇"},
          {name: "梯面镇", id: "梯面镇"},
          {name: "狮岭镇", id: "狮岭镇"},
        ],
        levelList:[
          {name: "主干道", id: "主干道"},
          {name: "次干道", id: "次干道"},
          {name: "支路", id: "支路"},
          {name: "农村道路", id: "农村道路"},
        ],
        sels: [],
        user: {},
        mapShow: false,
        mapInfo: {
          lat: "",
          lng: "",
          address: "",
        },
        lightList: [],
        uploadDialog:false,
        quickDialog:false,
        isquick:false,
        importList:[],
        configPicData: {}, // 图片附件数据
        configPicList: [], // 图片集合
        imgUrl:"https://hdzmsspt.com/file/"
      }
    },
    methods: {
      closeQuick(){
        this.quickDialog = false;
        this.isquick = false;
      },
      openQuick () {
        this.quickDialog = true;
        this.isquick = true;
        this.streetLamp = {}
        this.$nextTick(()=>{
          this.initMap()
        })
        this.$http.post('/smartLight/web/baseAccount/getDeptsList.htm', {}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.deptList = resBody.result
          }
        })
      },
      configFileChange (file, fileList) {

      },
      configFileSuccess (response, file, fileList) {
        this.importList = response.data.errorFails
        this.$message({
          message: '导入成功',
          type: 'success'
        })
        console.log(response)
      },
      closePicDialog () {
        this.pictureDialog = false
        // 数据初始化
        this.configPicList = []
        this.configPicData = {}
        this.hasPic = false
        this.copyValueShow = false
        this.radioIndex = -1
        this.updateIndex = -1
        this.isChangePic = false
        this.useNaviIcon = false
        this.naviIconIndex = -1
        $('.navi-icon-sel').removeClass('navi-icon-sel')
      },
      configPicError () {
        this.$refs.upload.clearFiles()
      },
      // 图片移除钩子方法
      configPicRemove () {
        console.log(file, fileList)
        this.configPicList = fileList;
      },
      // 图片上传成功方法
      configPicSuccess (response, file, fileList) {
        console.log(response,fileList)
        this.configPicList = fileList;
        this.$forceUpdate()
      },
      selsChange: function (sels) { // 设置选中列----单仕瑞--2017年4月12日 13:44:41
        this.sels = sels
      },
      batchDelete () { // 批量删除的id集合--单仕瑞--2017年4月12日 13:44:41
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        this.deleteStreetLamp(ids)
      },
      showMap(){
        if (!this.streetLamp.distributionBoxid) {
          this.$message({
            message: '请选择配电箱',
          })
          return
        }
        var params = {
          userName: localStorage.getItem("userName"),
          pageNumber: 1,
          pageSize: 1000,
          filter: 1,
          distributionBoxid: this.streetLamp.distributionBoxid,
        }
        this.$http.post('/smartLight/web/streetLamp/getList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.lightList = resBody.result.content
            console.log(this.lightList)
            this.mapShow = true;
            setTimeout(() => {
              this.initMap(true)
            }, 300)
          }
        })

      },
      getAdress(){
        var that = this;
        var arr = this.streetLamp.lngLat.split(",");
        var lng = arr[0];
        var lat = arr[1];
        var map = new AMap.Map("map2", {
          resizeEnable: true
        });
        var lnglatXY = [lng, lat];
        AMap.service('AMap.Geocoder', function () {//回调函数
          var geocoder = new AMap.Geocoder({});
          console.log(geocoder)
          geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              //              console.log(result.regeocode.formattedAddress)
              var address = result.regeocode.formattedAddress;
              that.streetLamp.liveArea = address;
              that.$forceUpdate()
              console.log(that.streetLamp)
            } else {
              //获取地址失败
            }
          });
        })
      },
      initMap(isquick){
        var that = this;
        if (this.streetLamp.lngLat) {
          var arr = this.streetLamp.lngLat.split(",");
          var lng = arr[0];
          var lat = arr[1];
          that.mapInfo.lng = lng
          that.mapInfo.lat = lat
          that.mapInfo.liveArea = this.streetLamp.liveArea
        }
        //        console.log("经度："+lng+"纬度"+lat);
        this.map = new AMap.Map("addr", {
          resizeEnable: true,
          center: this.streetLamp.lngLat ? [lng, lat] : ""
        });
        //获取定位标记
        var marker = new AMap.Marker({
          position: this.map.getCenter(),
          //draggable: true,
          cursor: 'move',
          raiseOnDrag: true
        });
        var lightIcon = new AMap.Icon({
          size: new AMap.Size(27, 27),
          image:"../../../static/images/light_03.png",
          imageSize: new AMap.Size(27, 27),
        });
        var pdIcon = new AMap.Icon({
          size: new AMap.Size(27, 27),
          image:"../../../static/images/pd_02.png",
          imageSize: new AMap.Size(27, 27),
        });
        var lightMarkerList = [];
        if(this.lightList.length > 0){
          this.lightList.forEach((item) => {
            var lng = item.lngLat.split(",")[0]
            var lat = item.lngLat.split(",")[1]
            var endMarker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat),
              icon: lightIcon,
              offset: new AMap.Pixel(-13, -30),
              label:{
                content: "<div class='info'>"+ item.address +"</div>", //设置文本标注内容
                direction: 'top' //设置文本标注方位
              }
            });
            lightMarkerList.push(endMarker)
          })
        }

        var pdLngLat = "";
        var pdName = "";
        this.pdList.forEach((item)=>{
            if(item.id == this.streetLamp.distributionBoxid){
              pdLngLat = item.lngLat;
              pdName = item.name;
            }
        })
        console.log(pdLngLat)
        if(pdLngLat){
          var pdMarker = new AMap.Marker({
            position: new AMap.LngLat(pdLngLat.split(",")[0], pdLngLat.split(",")[1]),
            icon: pdIcon,
            offset: new AMap.Pixel(-13, -30)
          });
          pdMarker.setLabel({
            content: "<div class='info'>"+ pdName +"</div>", //设置文本标注内容
            direction: 'top' //设置文本标注方位
          });
          this.map.add([pdMarker]);
        }
        console.log(lightMarkerList)
        if(lightMarkerList.length>0){
          this.map.add(lightMarkerList);
        }
        marker.setMap(this.map);

        var obj = {}
        var clickEventListener = this.map.on('click', function (e) {
          //alert(e.lnglat.getLng());
          var lng = e.lnglat.getLng();
          var lat = e.lnglat.getLat();
          that.mapInfo = {lng: '', lat: "", liveArea: "",}
          marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //
          var lnglatXY = [lng, lat];//地图上所标点的坐标
          AMap.service('AMap.Geocoder', function () {//回调函数
            var geocoder = new AMap.Geocoder({});
            geocoder.getAddress(lnglatXY, function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                //              console.log(result.regeocode.formattedAddress)
                var address = result.regeocode.formattedAddress;
                that.mapInfo.lng = lng;
                that.mapInfo.lat = lat;
                that.mapInfo.liveArea = address;
                if(that.isquick){
                    that.sureMap()
                }
                console.log(that.mapInfo)
              } else {
                //获取地址失败
              }
            });
          })
        });
      },
      addLight(fromChange){
        if (!this.streetLamp.distributionBoxid) {
          this.$message({
            message: '请选择配电箱',
          })
          return
        }
        var params = {
          userName: localStorage.getItem("userName"),
          pageNumber: 1,
          pageSize: 1000,
          filter: 1,
          distributionBoxid: this.streetLamp.distributionBoxid,
        }
        this.$http.post('/smartLight/web/streetLamp/getList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.lightList = resBody.result.content;
            console.log(this.lightList)
            setTimeout(() => {
              this.initMap(true)
            }, 300)
          }
        })
      },
      sureMap(){
        this.mapShow = false
        this.streetLamp.lngLat = this.mapInfo.lng + "," + this.mapInfo.lat;
        console.log(this.streetLamp.lngLat)
        this.streetLamp.liveArea = this.mapInfo.liveArea;
      },
      getRoadList(formChange){
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid,
          treamId: this.streetLamp.treamId,
          roadId: this.streetLamp.roadId,
        }
        this.$http.post('/smartLight/web/accessRoad/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.roadList = resBody.result.content
            if(formChange){
              this.streetLamp.roadId = '';
            }
          }
        })
      },
      getTeamList (formChange) {
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid
        }
        this.$http.post('/smartLight/web/sysTream/getList.htm', para).then(response => {
          var resBody = response.body
          if(formChange){
            this.streetLamp.treamId = '';
            this.streetLamp.distributionBoxid = '';
            this.streetLamp.roadId = '';
          }

          this.$forceUpdate()

//          this.streetLamp.roadId = '';
          if (resBody.isSuccess === 0) {
            this.teamList = resBody.result.content
            console.log(this.teamList)
          }
        })
      },
      resetWeiXin () {
        this.showWeiXin = false
        this.qrcodeUrl = ''
      },
      doSave (index, row) {
        this.$http.post('/smartLight/xywl/getQRcodeCXNEW.htm', {id: row.id}).then(response => {
          var data = response.body
          console.log(data)
          if (data.res === 0) {
            this.qrcodeUrl = data.url
            this.showWeiXin = true
          } else {
            this.$message({
              showClose: true,
              message: '生成二维码失败',
              type: 'error'
            })
          }
        })
      },
      // 【新增】
      handleAdd (index, row) {
        this.showAdd = true
        this.dialogTitle = '新增路灯'
        this.teamList = []
        this.streetLamp = {}
        this.streetLamp.treamId = ''
        this.$http.post('/smartLight/web/baseAccount/getDeptsList.htm', {}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.deptList = resBody.result
          }
        })
      },
      // 【编辑】
      handleEdit (index, row) {
        this.dialogTitle = '编辑路灯'
        var params = {
          id: row.id,
          type: this.loginType
        }
        console.log(params)
        this.$http.post('/smartLight/web/baseAccount/getDeptsList.htm', {}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.deptList = resBody.result
          }
        })
        this.$http.post('/smartLight/web/streetLamp/getById.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.streetLamp = resBody.result;
            if(this.streetLamp.lngLat && !this.streetLamp.liveArea){
              this.getAdress()
            }
            if (this.streetLamp.pic) {
              var arr = this.streetLamp.pic?this.streetLamp.pic.split(",").map(item=>{
                return {url: this.imgUrl + item}
              }):[]
              this.configPicList = arr;
              console.log(arr)
            }
            this.showAdd = true
            this.getTeamList()
            this.getPdList()
            this.getRoadList()
            console.log(resBody.result)
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      handleSubmit () {
        if(this.streetLamp.lngLat.indexOf("，") > -1){
          this.streetLamp.lngLat = this.streetLamp.lngLat.replace(/，/ig,',');
        }
        if(!this.streetLamp.lngLat || this.streetLamp.lngLat.indexOf(",") == -1){
          this.$message.error('经纬度请用逗号分割！');
          return false
        }
        this.$refs.streetLamp.validate((valid) => {
          if (valid) {
            if (this.dialogTitle == '编辑路灯') {
              this.$confirm('确认编辑该路灯吗？', '提示', {
                type: 'warning'
              }).then(() => {
                this.toSubmit()
              }).catch(() => {
                return
              })
            } else {
              this.toSubmit()
            }
          }
        })
      },
      toSubmit(){
        var params = {
          streetLamp: this.streetLamp,
          type: this.loginType
        }
        var arr = [];
        this.configPicList.forEach((item)=> {
          if(item.response){
            arr.push(item.response)
          }else{
            arr.push(item.url.replace(this.imgUrl,""))
          }
        })
        params.streetLamp.pic = arr.toString();
        console.log(this.streetLamp)
        this.$http.post('/smartLight/web/streetLamp/save.htm', params).then(response => {
          var resBody = response.body
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'success'
            })
            this.page = 1
            if(!this.isquick){
              this.resetStreetLamp()
            }else{
              this.addLightIcon()
            }

            this.initExceptionReportList()
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      resetStreetLamp () {
        this.showAdd = false
        this.streetLamp = {}
        this.configPicList = [];
        this.$refs['streetLamp'].resetFields()
      },
      handleDelete (index, row) {
        var ids = []
        ids.push(row.id)
        this.deleteStreetLamp(ids)
      },
      // 【删除】执行方法
      deleteStreetLamp (ids) {
        this.$confirm('确定删除该路灯信息吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/streetLamp/del.htm', ids + '|' + this.loginType).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
              this.page = 1
              this.initExceptionReportList()
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '删除失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {
        })
      },
      type2Str (row) {
        if (row.type) {
          return '已处理'
        } else {
          return '未处理'
        }
      },
      //      时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        var date = d.getDate()
        if (date < 10) {
          date = '0' + date
        }
        var hh = d.getHours()
        if (hh < 10) {
          hh = '0' + hh
        }
        var mm = d.getMinutes()
        if (mm < 10) {
          mm = '0' + mm
        }
        var ss = d.getSeconds()
        if (ss < 10) {
          ss = '0' + ss
        }
        return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
      },
      search () {
        this.page = 1
        this.initExceptionReportList()
      },
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initExceptionReportList()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.currentPage = val
        this.initExceptionReportList()
      },
      initExceptionReportList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          meterAddr: this.meterAddrStr.trim(),
          streetLampType: this.streetLampTypeStr.trim(),
          address: this.addressStr.trim(),
//          powerUnit: this.powerUnitStr.trim(),
          type: this.loginType
        }
        console.log(para)
        this.$http.post('/smartLight/web/streetLamp/getList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements

            this.exceptionReportList = resBody.result.content
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      goMap (lngLat, adress) {
        window.open('https://uri.amap.com/marker?position=' + lngLat)
      },
      getPdList (formChange) {
        this.listLoading = true
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid,
          treamId: this.streetLamp.treamId,
        }
        this.$http.post('/smartLight/web/distridutionBox/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.pdList = resBody.result.content
            if(formChange){
              this.streetLamp.distributionBoxid = '';
              this.streetLamp.roadId = '';
            }
            this.listLoading = false
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      exportExcel(){
        var para = {
          meterAddr: this.meterAddrStr.trim(),
          streetLampType: this.streetLampTypeStr.trim(),
          address: this.addressStr.trim(),
//          powerUnit: this.powerUnitStr.trim(),
          type: this.loginType
        }
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        para.id = ids.toString()
        console.log(para)
        const loading = this.$loading({
          lock: true,
          text: '正在生成导出文件...',
        });
        this.$http.post('/smartLight/web/streetLamp/exportExcle.htm', para).then(response => {
          loading.close();
          var resBody = response.body
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            location.href = 'https://hdzmsspt.com/file/' + resBody.result
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      importExcel(){

      },
      addLightIcon(){
        var lightIcon = new AMap.Icon({
          size: new AMap.Size(27, 27),
          image:"../../../static/images/light_03.png",
          imageSize: new AMap.Size(27, 27),
        });
        var lng = this.mapInfo.lng
        var lat = this.mapInfo.lat
        var endMarker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          icon: lightIcon,
          offset: new AMap.Pixel(-13, -30),
          label:{
            content: "<div class='info'>"+ this.streetLamp.address +"</div>", //设置文本标注内容
            direction: 'top' //设置文本标注方位
          }
        });
        this.map.add([endMarker]);
      },
    },
    mounted () {
      this.canCode = window.canCode
      console.log(window.canCode)
      var user = sessionStorage.getItem('user')
      resetBreads(this)
      if (user) {
        user = JSON.parse(user)
        this.user = user
        this.loginType = user.type
        this.companytype = user.type
        this.initExceptionReportList()
//        this.getPdList()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .hideUpload .el-upload--picture-card{
    display none
  }
  .is-light
    max-width: 600px;

  .t_blue {
    color: #20a0ff;
    cursor pointer
  }

  #stlp
    .cell
      padding-left: 0px !important
      padding-right 0px !important
      overflow: hidden !important
      text-overflow: ellipsis !important
      white-space: nowrap !important
      .el-checkbox {
        padding-left: 15px !important
      }
    .img-size2 {
      width 30px;
      height 25px;
    }

  #addr {
    height 400px;
  }

  .map-dialog {
    width 800px !important;
  }

  .mapSpan span {
    display inline-block;
    width 175px;
    line-height 40px;
    color #333333;
    white-space nowrap;
    overflow hidden;
    text-overflow ellipsis;
  }

  .mapSpan span:last-child {
    width 400px;
  }
  .amap-marker-label{
    border none;
    padding 2px;
  }
  .el-dialog--small{
    width 1000px!important;
  }
  .el-dialog--small .el-form-item{
    width 45%;
    display inline-block;
  }
  .el-dialog--small .el-textarea{
    vertical-align top
  }
  .importTable{
    height 300px;
    overflow-y auto
  }
  .importTable .importTitle{
    margin-top 15px;
    font-weight bold
    }
  .importTable .tr{
    width 200px
    line-height 35px;
    display inline-block;
  }
  .importTable .tr span{
    display inline-block
  }
  .importTable .tr span:last-child{
    color #dd2727
  }
  .retailShopUpload .el-upload-list{
    display none
  }
  .quick_add{
    position absolute;
    top 0;
    left 0;
    width 100%;
    bottom 0;
    height auto;
    background-color #fff;
    z-index 5
  }
  .map3{
    height  calc(100vh - 160px) !important;
    overflow-y auto
  }
</style>
